<script lang="ts" setup>
defineProps({
  round: {
    type: Boolean,
    default: () => false
  },
  circle: {
    type: Boolean,
    default: () => false
  },
  disabled: {
    type: Boolean,
    default: () => false
  },
  size: {
    type: String,
    default: 'default'
  }
})
</script>

<template>
  <el-button :round="round" :size="size" :circle="circle" :disabled="disabled">
    <slot></slot>
  </el-button>
</template>

<style lang="scss" scoped>
.el-button {
  color: var(--music-title-color);
  border-color: var(--music-color-4);
  background-color: transparent;
}
.el-button:hover {
  background-color: var(--music-color-1);
  border-color: var(--music-color-4);
}
.el-button.is-disabled {
  background-color: rgba(139, 139, 139, 0.3);
  color: rgba(139, 139, 139, 0.7);
}
</style>
